import React, {Component} from "react";
import {View, Text, StyleSheet, TouchableOpacity, Image, PixelRatio, Dimensions} from "react-native";
import {color} from "../../widget/color";
const {width} = Dimensions.get('window');
import PropTypes from 'prop-types';

export default class MineIAPTabBar extends Component {

    static propType = {
        goToPage: PropTypes.func,
        activeTab: PropTypes.number,
        tabs: PropTypes.array,
        tabNames: PropTypes.array,
    };

    // componentDidMount() {
    //     this.props.scrollValue.addListener(this.setAnimationValue);
    // }
    //
    // setAnimationValue({value}) {
    //     console.log(value);
    // }

    render() {
        return (
            <View style={styles.tabs}>
                {this.props.tabs.map((tab, i) => {
                    let color = this.props.activeTab === i ? 'white' : '#333333';
                    let styleself = this.props.activeTab === i ? styles.submit_btn : styles.tabItem;
                    return (
                        <TouchableOpacity
                            key={i}
                            activeOpacity={0.8}
                            style={styles.tab}
                            onPress={()=>this.props.goToPage(i)}>
                            <View style={styleself}>
                                <Text style={{color: color, fontSize: 15,fontWeight:'bold'}}>
                                    {this.props.tabNames[i]}
                                </Text>
                            </View>
                        </TouchableOpacity>
                    )
                })}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        marginTop: 20
    },
    tabs: {
        flexDirection: 'row',
        height: 42,
        justifyContent:'space-around',
        alignItems:'center',
        paddingLeft:12,
        paddingRight:12,
    },
    tab: {

        width:(width-48)/3,
        height: 42,

    },
    tabItem: {
        borderRadius: 3,
        borderWidth:1,
        borderColor:'#DADADA',
        backgroundColor: '#FFFFFF',
        height: 42,
        justifyContent: 'center',
        alignItems: 'center',
        width:(width-48)/3,

    },
    submit_btn: {

        borderRadius: 3,
        backgroundColor: '#DB3843',
        height: 42,
        justifyContent: 'center',
        alignItems: 'center',
        width:(width-48)/3,
    },

});

